<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="/static/qywx/js/vue.min.js"></script>
<!--<template>-->
    <div class="qywx-modal-login-iframe">
        <div id="modalQrCode" class="qr-code" />
    </div>
<!--</template>-->
<script>
    new Vue({
        mounted() {
            this.createQrCode()
        },
        data() {
            return {
            }
        },
        computed: {
            redirectUri() {
                let protocol = window.location.protocol
                let host = window.location.host
                return protocol + '//' + host + '/#/qywx-modal-login-redirect'
            }
        },
        methods: {
            createQrCode() {
                const s = document.createElement('script')
                s.type = 'text/javascript'
                s.src = localStorage.getItem('wwLoginUrl')
                const wxElement = document.body.appendChild(s)
                let _this = this
                wxElement.onload = function() {
                    new window.WwLogin({
                        "id": 'modalQrCode',
                        "appid": localStorage.getItem('corpId'),
                        "agentid": localStorage.getItem('agentId'),
                        "redirect_uri": encodeURIComponent(_this.redirectUri),
                    })
                }
            }
        },
    });
</script>
<style>
    .qywx-modal-login-iframe {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
</body>
</html>